import { SearchOutlined } from '@ant-design/icons'
import { useBoolean } from '@gnlab/utils/env-react'
import { Select } from 'antd'
import { EditModal } from '@/desktop/components'
import { FilterMode } from '@/desktop/logics/contacts'
import { colors } from '@/desktop/styles'
import { ContactType } from '@/services/contacts'
import { FilterByTime } from './filter-by-time'
import { SearchModal } from './modal'

export function Search({
  type,
  filterMode = FilterMode.All,
  setFilterMode,
}: {
  type: ContactType
  filterMode?: FilterMode
  setFilterMode?: (value: FilterMode) => void
}) {
  const [showing, open, close] = useBoolean(false)
  return <>
    <div css={s.search}>
      <div css={s.input} onClick={open}>
        <SearchOutlined />
        <span className="placeholder">搜索</span>
      </div>
      <Select
        css={s.filterByMode}
        value={filterMode}
        onChange={setFilterMode}
        options={[
          { label: '全部聊天', value: FilterMode.All },
          { label: <span className="spec">未读聊天</span>, value: FilterMode.Unread },
          { label: <span className="spec">未回复聊天</span>, value: FilterMode.Unanswered },
        ]}
      />
      {type === ContactType.external ? <FilterByTime /> : null}
    </div>

    <EditModal styleName="modal" width="600px" closable={false} open={showing} onCancel={close}>
      {showing ? <SearchModal initialType={type} onClose={close} /> : null}
    </EditModal>
  </>
}

const s = {
  search: css`
    display: flex;
    padding: 20px;
  `,
  input: css`
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: ${colors.gray};
    display: flex;
    flex: 1;
    line-height: 34px;
    margin-right: 10px;
    padding-left: 10px;
    .anticon {
      font-size: 18px;
      margin-right: 9px;
    }
    .placeholder {
      cursor: text;
      flex: 1;
      font-size: 14px;
      letter-spacing: 1px;
    }
  `,
  filterByMode: css`
    width: 115px;
    &.ant-select-single {
      line-height: 34px;
      .ant-select-selector {
        background-color: #f5f5f5;
        border-radius: 4px;
        border: none;
        height: 34px;
        padding-top: 2px;
        .spec {
          color: ${colors.link};
        }
      }
    }
  `,
}
